<template>
	<view class="b-bg page">
		<!-- <view class="s-top b-w">
			<view class="title">
				个人资料
			</view> -->
			<!-- <view class="s-row">
				<view class="label">
					身份:
				</view> -->
				<!-- <view class="inputBox">
					普通用户 可通过<text class="text-a">教师认证</text>,获得教师身份
				</view> -->
				<!-- <view class="inputBox"> -->
					<!-- 教师 可通过<text class="text-a">教师认证</text>,获得教师身份 -->
					<!-- 教师  <text class="iconfont space-icon icon-sccuess icon-cuowutishi02"></text>已通过教师身份验证 -->
					<!-- 教师（审核中）  <text class="iconfont space-icon icon-warning icon-shijian"></text>教师身份审核认证中 -->
			<!-- 		无角色  <text class="iconfont icon-warning space-icon icon-shijian"></text>身份证未通过，请<text class="text-a">重新申请</text>
				</view>
			</view>
			<view class="s-row">
				<view class="label">
					账号:
				</view>
				<view class="inputBox">
					13425874115
				</view>
			</view>
			<view class="s-row">
				<view class="label">
					密码:
				</view>
				<view class="inputBox">
					<text>已设置</text>
					<view class="line-bt">修改</view>
				</view>
			</view>
			<view class="s-row biger">
				<view class="label">
					姓名:
				</view>
				<view class="inputBox">
					<input type="text" value="" class="inputBoxInput"  placeholder="请输入姓名"/>
				</view>
			</view>
			<view class="s-row biger">
				<view class="label">
					地区:
				</view>
				<view class="inputBox">
					<view class="select1">
						<uni-data-select
							 v-model="form_data.area1"
							 :localdata="rangeArea1"
							  :clear="false"
							 @change="change()"
						   ></uni-data-select>
					</view>
					<view class="select2">
						<uni-data-select
							 v-model="form_data.area1"
							 :localdata="rangeArea1"
							  :clear="false"
							 @change="change()"
						   ></uni-data-select>
					</view>
				</view>
			</view>
			<view class="s-row biger">
				<view class="label">
					学校:
				</view>
				<view class="inputBox">
					<uni-data-select
						 v-model="form_data.area1"
						 :localdata="rangeArea1"
						  :clear="false"
						 @change="change()"
					   ></uni-data-select>
				</view>
			</view>
		</view> -->
	     <view class="s-bottom b-w">
			 <view class="title">
				 <view>已关联子女({{studata.length}})</view>
				 <view @tap="addStudent">
				<!-- 	 <image src="../../static/img/add.png" mode=""></image> -->
					 <img src="../../static/img/add.png"  class="addICon"alt="">
					 <text>添加学生</text>
				 </view>
			 </view>
			 <view class="stus">
				 <view class="stu" v-for="(item,index) in studata" :key="index">
					<!-- <view class="del" @tap="deletStu(index)">
						 <text class="iconfont icon-shanchu icon-warning"></text>
					 </view> -->
					 <view class="st-title">
						 {{item.student_name}}
					 </view>
					 <view class="textell">地区：{{item.city_name}}{{item.county_name}}</view>
					 <view class="textell">学校：{{item.school_name}}</view>
					 <view class="textell">班级：{{item.class_name}}</view>
				 </view>
			 </view>
		 </view>
		<!-- <view class="btnBox">
			 <view class="bt">取消</view>
			 <view class="bt bt-a">确定修改</view>
		 </view> -->
		<!-- <view class="outBtn" @tap='goOut'>退出登录</view> -->
	</view>
	
</template>

<script>
	import mixin from '../../util/mixin';
	export default {
		mixins:[mixin],
		data() {
			return {
				studata:[]
			}
		},
		onShow() {
			this.getStudent();
		},
		onLoad() {
			
		},
		methods:{
			addStudent() {
			   uni.navigateTo({
			   	url:"/pages/addStu/addStu"
			   })
			},
			goOut(){
				uni.setStorageSync('token','');
				uni.setStorageSync('refresh','');
				uni.setStorageSync('user','');
				uni.navigateTo({
					url: '/pages/login/login'
				});
			},
			async deletStu(index) {
				const _this = this;
				uni.showModal({
					title: '提示',
					content: '是否确定删除？',
					success: async(res) => {
						if (res.confirm) {
						
									const id = _this.studata[index].student_id;
									console.log(id);
									const res = await this.$http({
										url:"api/student/del_student",
										method:'post',
										data:{
											student_id:id
										}
									},'lb')
									
									if(res) {
										_this.toast('操作成功')
										_this.studata.splice(index,1)
									}
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
						
						return false;
					}
				});
			},
			async getStudent() {
				const res = await this.$http({
					  url:'api/student/student_list',
					  method:'post',
					  data:{
						  page:1,
						  page_count:100
					  }
				},"lb")
				console.log(res);
				this.studata = res.student_list;
				console.log(this.studata);
				// console.log(this.studata);
			}
		}
	}
</script>

<style lang="scss">
	.outBtn {
		position: fixed;
		background-color: #f24545;
		color:#fff;
		bottom: 150rpx;
		left: 10rpx;
		width: 200rpx;
		height: 56rpx;
		line-height: 56rpx;
		text-align: center;
		border-radius: 10rpx;
		left: 50%;
		margin-left: -100rpx;
	}
	.btnBox {
		padding:50rpx 60rpx !important;
		@include bt-s-2();
	}
	.s-bottom {
		border-radius: 12rpx;
		padding: 25rpx 34rpx;
		.title {
			font-size: 30rpx;
			font-weight: 550;
			margin-bottom: 20rpx;
			display: flex;
			justify-content: space-between;
			.addICon {
				vertical-align: text-top;
				margin-right: 10rpx;
			}
		}
		.stus {
			.stu {
				padding: 40rpx;
				margin-bottom: 20rpx;
				background-color: #f7f7f7;
				border-radius: 10rpx;
				position: relative;
				.del {
					position: absolute;
					width: 100rpx;
					height: 100rpx;
					right:0rpx;
					top:0rpx;
					@include center()
				}
				
				.iconfont {
					font-size: 46rpx;
				}
				.st-title {
					margin-bottom: 15rpx;
					font-weight: 550;
					font-size: 30rpx;
				}
				.textell {
					font-size: 28rpx;
					padding-top: 10rpx;
				}
			}
			
		}
	}
    .s-top  {
		border-radius: 12rpx;
		padding: 25rpx 34rpx;
		margin-bottom: 30rpx;
		.iconfont {
			font-size: 32rpx;
			&.space-icon {
			 margin-left: 20rpx;
		  }
		}
		.title {
			font-size: 30rpx;
			font-weight: 550;
			
		}
		.s-row {
			&.biger {
				.inputBox {
					height: 98rpx;
				}
				.label  {
					height: 98rpx;
				}
				
			}
			font-size: 28rpx;
			display: flex;
			.label {
				display: flex;
				width: 86rpx;
				flex:none;
				height: 78rpx;
				align-items: center;
			}
			.inputBox {
				height: 78rpx;
				display: flex;
				align-items: center;
				width: 516rpx;
				.select1 {
					width: 242rpx;
					margin-right: 28rpx;
				}
				.select2 {
					width: 242rpx;
				}
				.inputBoxInput {
					background-color: #f7f7f7;
					height: 78rpx;
					padding-left: 20rpx;
					width: 100%;
				}
				.line-bt {
					padding: 20rpx;
					width: 106rpx;
					height: 50rpx;
					text-align: center;
					color:#fff;
					background-color: #f24545;
					@include center();
					border-radius: 8rpx;
					margin-left: 20rpx;
				}
			}
		}
	}
</style>


